<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
	<meta name="description" content="">
	<meta name="author" content="">
<!--	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
<!--	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
<!--	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
	<title>城市道路渠化信息服务系统</title>
	<!-- Bootstrap core CSS -->
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link th:href="@{/css/dashboard.css}" rel="stylesheet">
	<style type="text/css">
		/* Chart.js */
		/* Chart.js */
		/*导航栏居中*/
		.my-form {
			flex-flow: inherit;
		}

		.table td {
			vertical-align: inherit;
		}
		/*调整下拉框*/
		.dropdown {
			margin-right: 33px ;
		}
		@-webkit-keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		@keyframes chartjs-render-animation {
			from {
				opacity: 0.99
			}
			to {
				opacity: 1
			}
		}

		.chartjs-render-monitor {
			-webkit-animation: chartjs-render-animation 0.001s;
			animation: chartjs-render-animation 0.001s;
		}
		.dropdown-menu a:hover {
			color: #fff;
			text-decoration: none;
			border-radius: 5px;
			background-color: #03e9f4;
			box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
		}
		.dropdown-menu a {
			/*color: #03e9f4;*/
			color: black;
			/*font-size: 30px;*/
			overflow: hidden;
			font-weight: bold;
			text-decoration: none;
			/* height: 180px;
            width: 100px; */
			/*padding: 10px 20px;*/
			/* margin: 0 auto; */
			border-radius: 5px;
			/* 同样加个过渡 */
			transition: all 0.5s;
			position: relative;

		}
		/*方法等级不够,需在主页重写改方法*/
		/*a{*/

		/*	transition: all 0.5s;*/
		/*}*/
		/*a:hover {*/
		/*	color: #fff;*/
		/*	text-decoration: none;*/
		/*	border-radius: 5px;*/
		/*	background-color: #03e9f4;*/
		/*	box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;*/
		/*}*/
	</style>
</head>

<body>
<!--<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">-->

<!--	<a class="navbar-brand col-sm-3 col-md-2 mr-0" th:href="@{/index}">-->
<!--		UAV无人机检测路段-->
<!--	</a>-->
<!--	&lt;!&ndash;			<input class="col-sm-3 mr-0 form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">&ndash;&gt;-->
<!--	&lt;!&ndash;			<button type="button" class="btn btn-dark">查询</button>&ndash;&gt;-->
<!--	&lt;!&ndash;			<form class="form-control" action="/hello">&ndash;&gt;-->
<!--	&lt;!&ndash;			<input class="form-control form-control-dark w-25" type="text" placeholder="Search">&ndash;&gt;-->
<!--	&lt;!&ndash;			<button type="submit" class="btn btn-dark">查询</button>&ndash;&gt;-->
<!--	<form class="form-inline my-2 my-lg-0" th:action="@{/index}">-->
<!--		<input name="roadCrossing" class="form-control form-control-dark mr-sm-2" type="search" placeholder="Search" aria-label="Search">-->
<!--		<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>-->
<!--	</form>-->
<!--	&lt;!&ndash;			</form>&ndash;&gt;-->
<!--	<ul class="navbar-nav px-3">-->
<!--		<li class="nav-item text-nowrap">-->
<!--			<a class="nav-link" href="#">Sign out</a>-->
<!--		</li>-->
<!--	</ul>-->
<!--</nav>-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
	<div style="display: flex;width: 300px">

		<a class="navbar-brand col-sm-3 col-md-2 mr-0" th:href="@{/uav/user/index}" style="padding-right: 241px;">
<!--			UAV无人机检测路段-->
			城市道路渠化信息服务系统
		</a>
		<!--			<input class="col-sm-3 mr-0 form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">-->
		<!--			<button type="button" class="btn btn-dark">查询</button>-->
		<!--			<form class="form-control" action="/hello">-->
		<!--			<input class="form-control form-control-dark w-25" type="text" placeholder="Search">-->
		<!--			<button type="submit" class="btn btn-dark">查询</button>-->
		<form class="form-inline my-form" th:action="@{/uav/user/detail}">
			<input type="hidden" name="roadCrossing" th:value="${roads[0].roadcrossing}">
			<input type="hidden" name="id" th:value="${roads[0].id}">
			<input name="node" class="form-control form-control-dark  " type="search" placeholder="Search"
				   aria-label="Search" style="width: 500px !important">
			<button class="btn btn-outline-success my-2 my-sm-0" type="submit" style="margin-left: 10px">Search</button>
		</form>
		<!--			</form>-->
	</div>

	<ul class="navbar-nav px-3">
		<li class="nav-item text-nowrap">
			<a class="nav-link" th:href="@{/uav/logout}">Sign out</a>
		</li>
	</ul>
</nav>
<!--		退出标签-->
<div class="container-fluid">
	<div class="row">
		<nav class="col-md-2 d-none d-md-block bg-light sidebar">
			<div class="sidebar-sticky">
				<ul class="nav flex-column">

					<li class="nav-item" style="margin-top: 5px;margin-left: 20px">
						<a class="nav-link" th:href="@{/uav/user/index?id=0}">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
								 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								 stroke-linejoin="round" class="feather feather-home">
								<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
								<polyline points="9 22 9 12 15 12 15 22"></polyline>
							</svg>
							路段信息 <span class="sr-only">(current)</span>
						</a>
					</li>
					<li class="nav-item" style="margin-top: 10px;margin-left: 20px">
						<a class="nav-link" th:href="@{/uav/user/manger?id=1}">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
								<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
							</svg>
							&nbsp;用户管理
							<span class="sr-only">(current)</span>
						</a>
					</li>
					<li class="nav-item" style="margin-top: 10px;margin-left: 20px">
						<a class="nav-link" th:href="@{/uav/user/system?id=2}">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-signpost-2" viewBox="0 0 16 16">
								<path d="M7 1.414V2H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h5v1H2.5a1 1 0 0 0-.8.4L.725 8.7a.5.5 0 0 0 0 .6l.975 1.3a1 1 0 0 0 .8.4H7v5h2v-5h5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H9V6h4.5a1 1 0 0 0 .8-.4l.975-1.3a.5.5 0 0 0 0-.6L14.3 2.4a1 1 0 0 0-.8-.4H9v-.586a1 1 0 0 0-2 0zM13.5 3l.75 1-.75 1H2V3h11.5zm.5 5v2H2.5l-.75-1 .75-1H14z"/>
							</svg>
							&nbsp;道路管理
							<span class="sr-only">(current)</span>
						</a>
					</li>
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">-->
<!--							Orders <span class="sr-only">(current)</span>-->
<!--						</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">-->
<!--							Products-->
<!--						</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">-->
<!--							Customers-->
<!--						</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">-->
<!--							Reports-->
<!--						</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="#">-->
<!--							Integrations-->
<!--						</a>-->
<!--					</li>-->

				</ul>
			</div>
		</nav>
		<!--				Share  Export  This week-->
		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<h2>详细信息</h2>
			<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
				<h1 class="h2">&nbsp;</h1>
				<div class="btn-toolbar mb-2 mb-md-0">
<!--					<div class="btn-group mr-2">-->
<!--						<button class="btn btn-sm btn-outline-secondary">Share</button>-->
<!--						<button class="btn btn-sm btn-outline-secondary">Export</button>-->
<!--					</div>-->
					<div class="dropdown">
						<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
								<rect x="3" y="4" width="18" height="18" rx="2" ry="2">
								</rect>
								<line x1="16" y1="2" x2="16" y2="6">
								</line>
								<line x1="8" y1="2" x2="8" y2="6">
								</line>
								<line x1="3" y1="10" x2="21" y2="10">
								</line>
							</svg>
							功能选项
						</button>
						<ul class="dropdown-menu" style="width: 111px !important;min-width: 0rem !important" >
							<li><a data-toggle="modal" data-target="#myModal" href="#" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">查看图片</a></li>
							<li><a th:href="@{/uav/user/download(fileName=${fileName},type='.dwg')}" style="height: 30px;line-height:30px;text-align: center;display: block;text-decoration: none">下载文件</a></li>
							<li th:each="road:${roads}">
								<a th:href="@{/uav/user/exportExcel(roadCrossing=${road.getRoadcrossing()},type='road')}" style="height: 30px;line-height:30px;text-align: center;display: block;text-decoration: none">下载路宽</a>
								<a th:href="@{/uav/user/exportExcel(roadCrossing=${road.getRoadcrossing()},type='location')}" style="height: 30px;line-height:30px;text-align: center;display: block;text-decoration: none">下载坐标</a>
							</li>
<!--							/exportExcel-->
						</ul>
					</div>

				</div>
			</div>

			<!-- 图片模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content" style="width: 700px;">
						<div class="modal-header">
							<h4 class="modal-title" id="myModalLabel">
								[[${imageName}]]
							</h4>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
						</div>
						<div class="modal-body">
							<img th:src="@{'/dwg/'+${imageName}+'.jpg'}" width="650px" height="500px">

						</div>
						<div class="modal-footer">
							<a class="btn btn-outline-warning" th:href="@{/uav/user/download(fileName=${fileName},type='.jpg')}">下载</a>
<!--							<a th:href="@{/download(fileName=${fileName},type='.jpg')}" data-dismiss="modal">-->
<!--								下载-->
<!--							</a>-->
						</div>
<!--						<div class="modal-footer">-->
<!--							<button type="button" class="btn btn-default" data-dismiss="modal">-->
<!--								关闭-->
<!--							</button>-->
<!--						</div>-->
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>

			<table class="table table-striped table-sm">
				<thead>
				<tr>
					<th>交叉路口名称</th>
					<th>道路名称</th>
					<th>顺序</th>
					<th>路宽</th>
					<th>行驶方向</th>
					<th>车道方向</th>

				</tr>
				</thead>
				<tbody>
				<tr th:each="road:${roads}">
					<td>[[${road.roadcrossing}]]</td>
					<td>[[${road.roadname}]]</td>
					<td>[[${road.order}]]</td>
					<td class="double">[[${road.roadwidth}]]</td>
					<td>[[${road.roadtype}]]</td>
					<td>[[${road.roaddirection}]]</td>

				</tr>
				</tbody>
			</table>

			<h2>详细坐标</h2>
			<div class="table-responsive">
				<table class="table table-striped table-sm">
					<thead>
					<tr>
						<th>交叉路口名称</th>
						<th>点号</th>
						<th>X值</th>
						<th>Y值</th>
						<th>经度</th>
						<th>纬度</th>
						<th shiro:hasPermission="admin">操作</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="location:${locations}">
						<td>[[${location.roadcrossing}]]</td>
						<td>[[${location.node}]]</td>
						<td>[[${location.x}]]</td>
						<td>[[${location.y}]]</td>
						<td>[[${location.longitude}]]</td>
						<td>[[${location.latitude}]]</td>
						<td shiro:hasPermission="admin">
							<button type="button" class="btn btn-outline-success"
									data-toggle="modal" data-target="#myModal2"
									th:onclick="updateLocation([[${location}]])">修改</button>

							<button type="button" class="btn btn-outline-success"
									data-toggle="modal" data-target="#myModal1"
									th:onclick="updateLocation1([[${location}]])">删除</button>


						</td>
					</tr>
					</tbody>
				</table>

			</div>
			<!--修改拟态框-->
			<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content" style="width: 533px;">
						<div class="modal-header">
							<h4 class="modal-title" id="myModalLabel2">
								修改坐标
							</h4>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
						</div>
						<div class="modal-body">
							<form action="/uav/user/system/updateLocation">
								<input type="hidden" value="1" id="i" name="id">

								<div class="form-group">
									<label for="u" style="color: black!important;">交叉路口名称</label>
									<input value="jqx" id="u" name="roadcrossing" class="form-control" required="">
								</div>
								<div class="form-group">
									<label for="p" style="color: black!important;">点号</label>
									<input value="123456" id="p" name="node" class="form-control"required="">
									<label for="x" style="color: black!important;">X值</label>
									<input value="user" id="x" name="x" class="form-control" required="">
									<label for="y" style="color: black!important;">Y值</label>
									<input value="user" id="y" name="y" class="form-control" required="">
								</div>
								<div class="form-group">
									<label for="j" style="color: black!important;">经度</label>
									<input value="user" id="j" name="longitude" class="form-control" required="">
								</div>
								<div class="form-group">
									<label for="w" style="color: black!important;">纬度</label>
									<input value="user" id="w" name="latitude" class="form-control" required="">
								</div>


								<p><button type="submit" class="btn btn-primary Mybutton" data-toggle="modal" style="margin-left: 400px">确认修改</button></p>

							</form>
						</div>
						<!--            <div class="modal-footer">-->
						<!--            </div>-->
					</div>
				</div>
			</div>

			<!--删除拟态框-->
			<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content" style="width: 533px;">
						<div class="modal-header">
							<h4 class="modal-title" id="myModalLabel1">
								删除坐标
							</h4>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
						</div>
						<div class="modal-body">
							<form action="/uav/user/system/deleteLocation">
								<input type="hidden" value="1" id="i1" name="id">

								<div class="form-group">
									<label for="u" style="color: black!important;">交叉路口名称</label>
									<input disabled="disabled" value="jqx" id="u1" name="roadcrossing" class="form-control" required="">
								</div>
								<div class="form-group">
									<label for="p" style="color: black!important;">点号</label>
									<input disabled="disabled" value="123456" id="p1" name="node" class="form-control"required="">
									<label for="x" style="color: black!important;">X值</label>
									<input disabled="disabled" value="user" id="x1" name="x" class="form-control" required="">
									<label for="y" style="color: black!important;">Y值</label>
									<input disabled="disabled" value="user" id="y1" name="y" class="form-control" required="">
								</div>
								<div class="form-group">
									<label for="j" style="color: black!important;">经度</label>
									<input disabled="disabled" value="user" id="j1" name="longitude" class="form-control" required="">
								</div>
								<div class="form-group">
									<label for="w" style="color: black!important;">纬度</label>
									<input disabled="disabled" value="user" id="w1" name="latitude" class="form-control" required="">
								</div>


								<p><button type="submit" class="btn btn-primary Mybutton" data-toggle="modal" style="margin-left: 400px">确认删除</button></p>

							</form>
						</div>
						<!--            <div class="modal-footer">-->
						<!--            </div>-->
					</div>
				</div>
			</div>

		</main>
	</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>

	//修改用户
	function updateLocation(location){
		console.log(location)
		document.getElementById('i').value=location.id;
		document.getElementById('u').value=location.roadcrossing;
		document.getElementById('p').value=location.node;
		document.getElementById('x').value=location.x;
		document.getElementById('y').value=location.y;
		document.getElementById('j').value=location.longitude;
		document.getElementById('w').value=location.latitude;
		// alert(u+p+r);
	}
	//删除用户
	function updateLocation1(location){
		document.getElementById('i1').value=location.id;
		document.getElementById('u1').value=location.roadcrossing;
		document.getElementById('p1').value=location.node;
		document.getElementById('x1').value=location.x;
		document.getElementById('y1').value=location.y;
		document.getElementById('j1').value=location.longitude;
		document.getElementById('w1').value=location.latitude;
		// alert(u+p+r);
	}
	var roadWidthList=document.getElementsByClassName("double");
	for (let i = 0; i < roadWidthList.length; i++) {
		// roadWidthList[i].innerHTML=roadWidthList[i].innerHTML.toFixed(3);
		var num = new Number(roadWidthList[i].innerHTML=roadWidthList[i].innerHTML);
		console.log(num.toFixed(3));
		roadWidthList[i].innerHTML=num.toFixed(3);
	}
</script>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>

<!-- Icons -->
<!--<script type="text/javascript" th:src="@{js/feather.min.js}" ></script>-->
<!--<script>-->
<!--	feather.replace()-->
<!--</script>-->

</body>

</html>
